<template>
	<view class="allbackground" @tap="chufapickerviewfalse" @touchmove.stop.prevent="stopscroll">

		<view class="pickerpopup" v-if="visible" @tap.stop="()=>{}">
			<view class="pickerheader">
				选择学校
			</view>
			<picker-view mask-class="maskclass" :indicator-style="indicatorStyle" :value="value" @change="bindChange"
				class="picker-view">
				<picker-view-column>
					<view class="item" v-for="(item,index) in scrolllist" :key="index">{{item}}</view>
				</picker-view-column>

			</picker-view>
			<view class="confirm" @tap="chufapickerviewfalses">
				<text class="submitiButton">确认</text>
			</view>
		</view>



	</view>
</template>
<script>
	export default {
		name: "pickerviewscholl",
		props: {
			ARR: {
				type: Array,
				default: () => []
			}
		},
		data: function() {

			return {
				scrolllist: this.ARR,
				scrollIndex: 0,
				value: [],
				visible: true,
				indicatorStyle: `height: 50px;`,

			}
		},
		methods: {
			stopscroll() {},
			chufapickerviewfalses() {
				// let a1 ={
				// 	code: this.cityall[0].code,
				// 	name: this.cityall[0].name
				// }
				// 	let a2 = {
				// 		code: this.cityArr[this.cityIndex].code,
				// 		name: this.cityArr[this.cityIndex].name
				// 	}

				// 	let a3 = {
				// 		code: this.districtArr[this.xianIndex].code,
				// 		name: this.districtArr[this.xianIndex].name
				// 	}
				// 	let data = [a1,a2,a3]

				this.$emit('getpicker', this.ARR[this.scrollIndex])

				this.chufapickerviewfalse()
			},
			chufapickerviewfalse() {
				this.$emit("pickerviewfalse")
			},
			bindChange: function(e) {
				this.scrollIndex = e.detail.value[0]


				this.$emit('getpicker', this.ARR[e.detail.value[0]])
			}
		},
		watch: {

			ARR: {
				handler(newval) {},
				immediate: true,
				deep: true
			}
		}
	}
</script>

<style lang="scss" scoped>
	.allbackground {
		width: 100vw;
		height: 100vh;
		position: absolute;
		top: 0;
	}

	.picker-view {
		background-color: #fff;
		width: 500rpx;
		height: 400rpx;
		margin: auto;
		box-sizing: border-box;
	}

	.pickerpopup {
		width: 600rpx;
		height: 600rpx;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		background-color: #fff;
		margin: 300rpx auto;
	}

	.pickerheader {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100rpx;
		font-size: 38rpx;
		font-weight: 600;
	}

	.item {
		line-height: 100rpx;
		text-align: center;
	}

	.confirm {
		height: 76rpx;
		background: #FF3B0A;
		border-radius: 38rpx;
		display: flex;
		margin: 24rpx 32rpx;

		.submitiButton {
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;
			margin: auto;
		}
	}
</style>